<template>
  <div class="X_AboutMe">

    <!-- 主体内容 -->
    <div class="Me_content">
      <!-- 个人信息 -->
      <div class="user_imfo">

        <!-- 头像 -->
        <div class="user_imfo_photo">
          <img :src="mine_user.user_avatar" alt="">
        </div>

        <!-- 资料 -->
        <div class="user_imfo_detail">

          <div class="u_one">
            <span>{{ mine_user.user_name }}</span>
          </div>

          <div class="u_two">
            等级：<el-tag type="success">{{ mine_user.user_level }}</el-tag>
            &nbsp;| &nbsp;
            <el-tag type="danger" v-if="mine_user.user_sex == '女'"><i class="el-icon-female"></i></el-tag>
            <el-tag  v-if="mine_user.user_sex == '男'"><i class="el-icon-male"></i></el-tag>
            &nbsp;| &nbsp;
            IP归属地:&nbsp;<el-tag type="danger">福建</el-tag>
          </div>

          <div class="u_three">
            <i class="el-icon-suitcase"></i><span>&nbsp; {{ mine_user.user_career }} &nbsp;| &nbsp; @xflow</span>
          </div>

          <div class="u_three">
            <i class="el-icon-edit"></i><span>&nbsp; {{ mine_user.user_signature }}</span>
          </div>
        </div>

        <!-- 链接以及修改个人资料 -->
        <div class="user_imfo_link_change">
          <div class="u_link">
            <el-tooltip class="item" effect="dark" content="稀土掘金" placement="bottom">
              <el-button type="primary" icon="el-icon-sugar" circle></el-button>
            </el-tooltip>&nbsp;
            <el-tooltip class="item" effect="dark" content="Gitee" placement="bottom">
              <el-button type="success" icon="el-icon-cold-drink" circle></el-button>
            </el-tooltip>&nbsp;
            <el-tooltip class="item" effect="dark" content="bilibili!哔哩哔哩" placement="bottom">
              <el-button type="warning" icon="el-icon-coffee-cup" circle></el-button>
            </el-tooltip>
          </div>

          <div class="u_change">
            <el-button type="primary" plain @click="openDrawer">编辑个人资料</el-button>
          </div>
        </div>
      </div>

      <!-- 收藏夹 -->
      <div class="user_start">
        <div>
          <el-menu default-active="1" mode="horizontal">
            <el-menu-item index="1">
              <i class="el-icon-video-camera-solid"></i>
              <span slot="title">收藏视频</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-collection"></i>
              <span slot="title">收藏笔记</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>

      <!-- 收藏内容卡片 -->
      <div class="star_card" v-for="item in mine_starts" :key="item.u_stars_id" @click="open_WatchVideo(item.video_id)">

        <!-- 首行 -->
        <div class="start_first_line">
          <span style="font-size: 15px;font-weight: 600;">{{ item.user_name }}</span> &nbsp;
          <span style="font-size: 13px;font-weight: 500;
                          color: rgb(114, 119, 123);">赞了这条知识</span>
        </div>

        <!-- 内容行 -->
        <div class="start_conten_line">
          <!-- 头像 -->
          <div class="start_conten_line1">
            <img src="../assets/picture/boyanddog1.jpg">
          </div>

          <!-- 作者名，公司，标题 -->
          <div class="start_conten_line2">
            <div class="scl2_1">
              <span>{{ item.auther_name }}</span>
            </div>
            <div class="scl2_2">
              <span>{{ item.auther_carrer }}｜@xflow</span>
            </div>

            <div>
              <h3>{{ item.title }}</h3>
            </div>
          </div>
          <div class="start_conten_line3">
            <img :src="item.cover_img" alt="">
          </div>
        </div>
        <!-- 尾行 -->
        <div class="start_last_cline">
          <div><i class="el-icon-star-off"></i></div>
          <div><i class="el-icon-chat-dot-square"></i></div>
          <div><i class="el-icon-paperclip"></i></div>
        </div>
      </div>

      <!-- 底部需要高度撑大 ，不然滑动有问题-->
      <div style="height: 200px; width: 100%;"></div>

    </div>

    <!-- 个人成就 -->
    <div class="Me_achieve">

      <div class="achieve1">
        <div style="height: 50px;width: 100%; padding-left: 10px;">
          <span style="font-size: 20px; font-weight: 500; line-height: 50px;">个人成就</span>
        </div>
        <hr style="border-color: #bdbbfd9b; border-width: 0.5px;">
        <div class="achieve_decorate">
          <i class="el-icon-thumb"></i> &nbsp;知识被点赞 &nbsp; 64
        </div>
        <div class="achieve_decorate">
          <i class="el-icon-view"></i> &nbsp;知识被阅读 &nbsp; 24,194
        </div>
        <div class="achieve_decorate">
          <i class="el-icon-attract"></i> &nbsp;原力值 &nbsp; 1,211
        </div>
      </div>

      <div class="achieve2">
        <div class="achieve2_1">关注了<br>26</div>
        <div class="achieve2_2">关注者<br>28</div>
      </div>

      <div class="achieve3">
        <div class="achieve3_1">
          <div>收藏集</div>
          <div>1</div>
        </div>

        <div class="achieve3_2">
          <div>关注标签</div>
          <div>5</div>
        </div>

        <div class="achieve3_3">
          <div>加入于</div>
          <div>2023-06-27</div>
        </div>
      </div>
    </div>

    <!-- 抽屉--修改个人资料 -->
    <el-drawer title="一个小抽屉" :visible.sync="drawer" :with-header="true" append-to-body>

      <h1 style="text-align: center">修改个人资料</h1>

      <div style="padding: 20px; margin-top: 60px;">

        <!-- user_avatar -->
        <div style="text-align: center;">
          <el-upload class="avatar-uploader" action="" :http-request="upload" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="mine_user.user_avatar" :src="mine_user.user_avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

        <!-- 隐藏 user_id -->

        <!-- user_name -->
        <div style="margin-bottom: 10px;">
          <el-input placeholder="请输入内容" v-model="mine_user.user_name">
            <template slot="prepend">用户名</template>
          </el-input>
        </div>

        <!-- password -->
        <div style="margin-bottom: 10px;">
          <el-input placeholder="请输入内容" v-model="mine_user.password">
            <template slot="prepend">密码</template>
          </el-input>
        </div>

        <!-- user_sex -->
        <div style="margin-bottom: 10px;">
          <el-radio v-model="mine_user.user_sex" label="男" border>男 <i class="el-icon-male"></i></el-radio>
          <el-radio v-model="mine_user.user_sex" label="女" border>女 <i class="el-icon-female"></i></el-radio>
        </div>

        <!-- user_signature -->
        <div style="margin-bottom: 10px;">
          <el-input placeholder="请输入内容" v-model="mine_user.user_signature">
            <template slot="prepend">个性签名</template>
          </el-input>
        </div>

        <!-- user_career -->
        <div style="margin-bottom: 10px;">
          <el-input placeholder="请输入内容" v-model="mine_user.user_career">
            <template slot="prepend">职业</template>
          </el-input>
        </div>

        <el-button type="primary" plain @click="send_alter">提交修改</el-button>
      </div>
    </el-drawer>
  </div>
</template>
  
<script>
export default {
  name: 'X_AboutMe',
  data() {
    return {
      // 个人信息
      mine_user: {
        "user_id": 2,
        "user_name": "冰镇生鲜",
        "password": "admin",
        "user_avatar": "http://localhost:3000/data/_r.jpg",
        "user_level": "1",
        "user_sex": "男",
        "user_career": "保安",
        "user_signature": "哥只是个传说",
        "user_role": "normal",
        "user_power": "normal"
      },
      // 个人收藏信息
      mine_starts: [
        {
          "u_stars_id": 1,
          "note_id": 0,
          "video_id": 1,
          "user_id": 2,
          "user_name": "kzb",
          "auther_id": 1,
          "auther_name": "admin",
          "auther_carrer": "保安",
          "title": "测试视频",
          "cover_img": "http://localhost:3000/data/fengmian.webp"
        }
      ],
      // 抽屉控制
      // 抽屉控制
      drawer: false
    }
  },
  mounted () {
    this.get_userImfo();
    this.get_userVideoStarts();
  },
  methods: {
    // 跳转到收藏视频
    open_WatchVideo(videoId) {
      this.$router.push({ path: "/xflow/WatchVideo", query: { video_id: videoId } })
    },
    // 上传头像  http://localhost:3000/atom/imgUpload
    upload(param) {
      const formdate = new FormData()
      formdate.append('data', param.file)
      const url = '/atom/imgUpload'
      const headers = {
        'Content-Type': 'multipart/form-data'
      }
      // axios.post的构造函数有顺序，不可乱
      this.$http.post(
        url,
        formdate,
        headers
      ).then(res => {
        // console.log(data)
        this.$message.success("图片上传成功")
        this.mine_user.user_avatar = res.data.imgfile_url
      }).catch(response => {
        console.log(response)
      })
    },
    handleAvatarSuccess(res, file) {
      this.mine_user.user_avatar = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 打开抽屉
    openDrawer () {
      this.drawer = true
    },
    // 发起修改个人资料请求 http://localhost:3000/mine/alterUserImfo
    send_alter () {
      this.$http({
        url: '/mine/alterUserImfo',
        params: {
          user_id: this.mine_user.user_id,
          user_name: this.mine_user.user_name,
          password: this.mine_user.password,
          user_avatar: this.mine_user.user_avatar,
          user_sex: this.mine_user.user_sex,
          user_career: this.mine_user.user_career,
          user_signature: this.mine_user.user_signature
        },
        method: 'post'
      }).then(res => {
          this.$message.success("修改个人信息成功")
          this.get_userImfo()
          this.drawer = false
      }).catch(res => {
        console.log(res);
      })
    },
    // 加载个人信息 http://localhost:3000/mine/getUserImfo
    get_userImfo () {
      this.$http({
        url: '/mine/getUserImfo',
        params: {
          user_id: window.sessionStorage.getItem("user_id"),
        },
        method: 'post'
      }).then(res => {
          this.mine_user = res.data.data
          this.$notify({
          title: '成功',
          message: '获取个人信息成功',
          type: 'success'
        });
      }).catch(res => {
        console.log(res);
      })
    },
    // 获取个人视频收藏集 http://localhost:3000/mine/getUserStarts
    get_userVideoStarts () {
      this.$http({
        url: '/mine/getUserStarts',
        params: {
          user_id: window.sessionStorage.getItem("user_id"),
        },
        method: 'post'
      }).then(res => {
          this.mine_starts = res.data.data
          this.$notify({
          title: '成功',
          message: '获取个人视频收藏集成功',
          type: 'success'
        });
      }).catch(res => {
        console.log(res);
      })
    }
  },
}
</script>

<style lang="less" scoped>
.X_AboutMe {
  width: 85%;
  height: auto;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  overflow: hidden;
  /* background-color: aquamarine; */
}

// 主体内容
.Me_content {
  padding-left: 5px;
  padding-right: 5px;
  width: 80%;
  height: auto;
  min-height: 760px;
  // background-color: cadetblue;
  overflow: scroll !important;

  .user_imfo {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;

    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;

    display: flex;

    .user_imfo_photo {
      width: 15%;
      height: 200px;
      // background-color: #5a54f9;
      padding: 20px;
      box-sizing: border-box;

      img {
        width: 100px;
        height: 100px;
        border: 1px solid #fff;
        border-radius: 50%;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
      }
    }

    .user_imfo_detail {
      width: 65%;
      height: 200px;
      // background-color: #bdbbfd;
      padding: 20px;
      box-sizing: border-box;

      .u_one {
        margin-bottom: 5px;

        span {
          font-size: 20px;
          font-weight: 600;
        }
      }

      .u_two {
        margin-bottom: 5px;

      }

      .u_three {
        margin-bottom: 5px;

        i {
          font-size: 20px;
          font-weight: 700;
          color: rgb(51, 53, 55);
        }

        span {
          font-size: 14px;
          font-weight: 500;
          color: rgb(114, 119, 123);
        }
      }
    }

    .user_imfo_link_change {
      padding: 20px;
      box-sizing: border-box;
      width: 20%;
      height: 200px;

      // background-color: #efeefe;
      .u_link {
        text-align: center;
        margin-bottom: 50px;
      }

      .u_change {
        text-align: center;

        .el-button {
          // width: 140px;
        }
      }
    }
  }

  // 收藏夹 导航栏
  .user_start {
    width: 100%;
    height: 61px;
    margin-bottom: 10px;

    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;
    overflow: hidden;

    // position: relative;
  }


  // 收藏内容卡片
  .star_card {
    width: 100%;
    height: 230px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 10px;
    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;
    overflow: hidden;

    // 首行
    .start_first_line {
      height: 40px;
      line-height: 40px;
      border-bottom: 0.5px solid #bdbbfd9b;
    }

    // 内容行
    .start_conten_line {
      width: 100%;
      height: 150px;
      border-bottom: 0.5px solid #bdbbfd9b;
      display: flex;

      .start_conten_line1 {
        width: 10%;
        // background-color: #5a54f9;
        padding: 10px;
        box-sizing: border-box;

        img {
          width: 50px;
          height: 50px;
          border: 1px solid #fff;
          border-radius: 50%;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
        }
      }

      .start_conten_line2 {
        width: 60%;

        // background-color: #bdbbfd;
        .scl2_1 {
          margin-top: 5px;
          margin-bottom: 5px;

          span {
            font-size: 20px;
            font-weight: 600;
          }
        }

        .scl2_2 {
          margin-bottom: 5px;

          span {
            font-size: 14px;
            font-weight: 500;
            color: rgb(114, 119, 123);
          }
        }
      }

      .start_conten_line3 {
        width: 30%;
        box-sizing: border-box;
        padding: 10px;
        position: relative;

        img {
          height: 96%;
          width: auto;
          border-radius: 10px;
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

    // 尾行
    .start_last_cline {
      height: 35px;
      line-height: 35px;
      display: flex;

      div {
        flex: 1;
        text-align: center;
        font-size: 20px;
        font-weight: 800;
        text-shadow: 0px 0px 6px rgba(179, 177, 248, 0.565);
        color: #bdbbfd;
      }

      div:hover {
        cursor: pointer;
      }
    }
  }
}

/* 去除滚动栏，保留滚动效果*/
.Me_content::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;

}


// 个人成就
.Me_achieve {
  width: 16%;
  height: 440px;
  margin-left: 5px;

  // border: 1px solid black;

  // background: rgba(255, 255, 255, 0.3);
  // backdrop-filter: blur(50px);
  // box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
  // transition: all 0.3s ease 0s;

  // border-radius: 10px;

  .achieve1 {
    padding: 5px;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;

    .achieve_decorate {
      display: flex;
      margin-bottom: 10px;

      i {
        margin-left: 10px;
        margin-right: 10px;

        display: block;
        width: 30px;
        height: 30px;
        border-radius: 50%;

        color: #5a54f9;
        background: #efeefe;
        border: 0.5px solid #bdbbfd;
        box-shadow: rgba(63, 44, 75, 0.1) 0px 2px 10px 2px;
        font-size: 20px;
        font-weight: 500;
        text-align: center;
        line-height: 30px;
      }
    }
  }

  .achieve2 {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;
    display: flex;

    .achieve2_1 {
      padding-top: 5px;
      box-sizing: border-box;
      width: 50%;
      height: 60px;
      text-align: center;
      border-right: 0.5px solid #bdbbfd9b;
    }

    .achieve2_2 {
      padding-top: 5px;
      box-sizing: border-box;
      width: 50%;
      height: 60px;
      text-align: center;
    }
  }

  .achieve3 {
    margin-top: 5px;
    padding: 5px;

    .achieve3_1 {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-top: 0.5px solid #bdbbfd9b;
      display: flex;

      div {
        width: 50%;
        height: 40px;
        text-align: center;
      }
    }

    .achieve3_2 {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-top: 0.5px solid #bdbbfd9b;
      display: flex;

      div {
        width: 50%;
        height: 40px;
        text-align: center;
      }
    }

    .achieve3_3 {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-top: 0.5px solid #bdbbfd9b;
      border-bottom: 0.5px solid #bdbbfd9b;
      display: flex;

      div {
        width: 50%;
        height: 40px;
        text-align: center;
      }
    }
  }
}
</style>